---
import Default from "@astrojs/starlight/components/PageTitle.astro";
import Logo from "./Logo.astro";
import EnhanceLogo from "./EnhanceLogo.astro";

const isDashHomepage = Astro.locals.starlightRoute.id === "";
const isEnhanceHomepage = Astro.locals.starlightRoute.id === "enhance";
---

<style>
  @keyframes dash-in {
    from {
      opacity: 0;
      filter: blur(1rem);
      translate: -50vw 0;
    }

    to {
      opacity: 1;
      filter: blur(0);
      translate: 0 0;
    }
  }

  #title-logo {
    animation: dash-in 400ms ease-out;
    h1 {
      line-height: 1.3;
      background-image: var(--hdr-gradient);
      background-size: 100%;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
      background-repeat: repeat;
    }
    transform: skew(-20deg);

    & > [aria-label="DASH ASCII Logo"] {
      transform: skew(0);
    }
  }
</style>

{
  isDashHomepage ? (
    <div
      id="title-logo"
      class="relative flex flex-col items-center justify-center gap-[1ch] pt-8 text-white lg:flex-row lg:items-baseline-last lg:gap-[3ch] lg:pt-16"
    >
      <div class="relative -left-8 flex flex-row items-center gap-8 md:left-0">
        {/* prettier-ignore */}
        <pre class="!bg-transparent text-[var(--sl-color-gray-4)] p-0">  ·-
·---
  --
</pre>
        <Logo className="inline text-3xl lg:text-4xl" />
      </div>
      <h1
        id="_top"
        aria-label="DASH Through Your GitHub"
        class="w-full translate-x-8 text-center -indent-4 text-2xl leading-normal lg:w-auto lg:translate-x-0 lg:text-left lg:indent-0 lg:text-4xl"
      >
        Through <br />
        Your GitHub
      </h1>
    </div>
  ) : isEnhanceHomepage ? (
    <div class="relative flex items-center justify-center gap-[2ch] pt-16 lg:gap-[3ch] lg:pt-26">
      <EnhanceLogo />
    </div>
  ) : (
    <Default>
      <slot />
    </Default>
  )
}
